<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 使用Promise封装ajax 
    const http = {
        get(url, payload, headers) {
            return new Promise((resolve, reject) => {
                // 拼装查询字符串  
                let query = '' 
                if(payload) {
                    query = '?' + Object.keys(payload).map((k) => {return `${k}=${payload[k]}`}).join('&')
                    // data = JSON.stringify(payload)
                }
                url += encodeURI(query) 

                const xhr = new XMLHttpRequest()
                xhr.open('GET', url)
                // 设置header 
                if(headers && Array.isArray(headers)) {
                    headers.forEach((item, idx) => {
                        xhr.setRequestHeader(item.key, item.value)
                    })
                }
                
                xhr.send()
                xhr.onreadystatechange = () => {
                    if(xhr.readyState == 4) {
                        if(xhr.status == 200) {
                            // console.log('response:', xhr.response)
                            resolve(xhr.response)
                        } else {
                            reject(xhr)
                        }
                    }
                }
            })
        },
        post(url, payload, headers) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest()
                xhr.open('POST', url)
                // 设置header 
                if(headers && Array.isArray(headers)) {
                    headers.forEach((item, idx) => {
                        xhr.setRequestHeader(item.key, item.value)
                    })
                }
                // 设置payload 
                let data = '' 
                if(payload) {
                    // data = Object.keys(payload).map((k) => {return `${k}=${payload[k]}`}).join('&')
                    data = JSON.stringify(payload)
                }
                // 发送请求 
                xhr.send(data)
                xhr.onreadystatechange = () => {
                    if(xhr.readyState == 4) {
                        if(xhr.status == 200) {
                            // console.log('response:', xhr.response)
                            resolve(xhr.response)
                        } else {
                            reject(xhr)
                        }
                    }
                }
            })
        },
    }

    // 登录
    function login() {
        let headers = [{key:'Content-Type', value:'application/json'}]
        let payload = {username: 'zsqqq1', password: '111111'}
        http.post('http://127.0.0.1:8001/user/login', payload, headers).then((res) => {
            console.log('res:', res)
            let data = JSON.parse(res)
            localStorage.setItem('token', data.token)
        }).catch((data) => {
            console.log(data)
        })
    }

    // 获取用户信息 
    function getInfo() {
        let jwtToken = localStorage.getItem('token')
        let headers2 = [{key: 'Authorization', value: jwtToken}]
        http.get('http://127.0.0.1:8001/my/userinfo', {name:'Jack', age: 16}, headers2).then((data) => {
            console.log(data)
        }).catch((data) => {
            console.log(data)
        })
    }
    
    // login()

    getInfo() 

</script>
</html>